<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>字体图标 | vue-next-admin</title>
    
    <meta name="generator" content="VitePress v1.6.3">
    <link rel="preload stylesheet" href="/vue-next-admin-doc-preview/assets/style.Brpq300p.css" as="style">
    <link rel="preload stylesheet" href="/vue-next-admin-doc-preview/vp-icons.css" as="style">
    
    <script type="module" src="/vue-next-admin-doc-preview/assets/app.BSorFS4w.js"></script>
    <link rel="preload" href="/vue-next-admin-doc-preview/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/chunks/theme.D_-w8-Et.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/chunks/framework.JQJLXAcz.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/config_iconfont_index.md.CwSwNiIL.lean.js">
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
    <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-e6e9343e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-518ab264></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-518ab264>Skip to content</a><!--]--><!----><header class="VPNav" data-v-e6e9343e data-v-fcd341ad><div class="VPNavBar" data-v-fcd341ad data-v-109f5bed><div class="wrapper" data-v-109f5bed><div class="container" data-v-109f5bed><div class="title" data-v-109f5bed><div class="VPNavBarTitle has-sidebar" data-v-109f5bed data-v-1ce8aa9a><a class="title" href="/vue-next-admin-doc-preview/" data-v-1ce8aa9a><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt data-v-3a7f1e1a><!--]--><span data-v-1ce8aa9a>vue-next-admin</span><!--[--><!--]--></a></div></div><div class="content" data-v-109f5bed><div class="content-body" data-v-109f5bed><!--[--><!--]--><div class="VPNavBarSearch search" data-v-109f5bed><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-109f5bed data-v-1b1a6c0b><span id="main-nav-aria-label" class="visually-hidden" data-v-1b1a6c0b> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/home/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-next-admin-doc-preview/config/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>配置</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>集成后端</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zuohuaijun/Admin.NET" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zuohuaijun Admin.NET</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@熊猫 PandaGoAdmin</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://toscode.gitee.com/GionConnection/gopro_free" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@甜蜜蜜 GoPro平台</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/GionConnection/niupi-free" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@甜蜜蜜 NiuPi 平台</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/tiger1103/gfast/tree/os-v3/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@游子 GFast-V3</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/diygw/diygw-ui-php/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@diygw.com gw-ui-php</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zsvg/vboot-net" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zsvg vboot-net</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zsvg/vboot-java" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zsvg vboot-java</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@青红造了个白 buildadmin</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/xiaodingding/iotfast" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@Goodwell iotfast(一个开源的物联网平台)</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>演示 & 仓库</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuGroup" data-v-c7a754f7 data-v-8c65019a><p class="title" data-v-8c65019a>⛱️ 线上演示</p><!--[--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="http://vuenextadmin.ccfast.cc/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue3.x 版本预览（vue-next-admin）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue2.x 版本预览（vue-prev-admin）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://lyt-top.gitee.io/vue-next-admin-shop-preview" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue3 + uni-app 商城（vue-next-admin-shop）</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-c7a754f7 data-v-8c65019a><p class="title" data-v-8c65019a>💒 代码仓库</p><!--[--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>gitee（国内：实时更新）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>github（国外：定期更新）</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>日志 & 文档</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>更新日志</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>文档仓库</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/support/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>赞助</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/shop/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>商城</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-109f5bed data-v-c3b75e45><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-c3b75e45 data-v-bd8da54f data-v-1587fe0b><span class="check" data-v-1587fe0b><span class="icon" data-v-1587fe0b><!--[--><span class="vpi-sun sun" data-v-bd8da54f></span><span class="vpi-moon moon" data-v-bd8da54f></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-109f5bed data-v-36a09a39 data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-bccf8a2a><span class="vpi-more-horizontal icon" data-v-bccf8a2a></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><!----><!--[--><!--[--><!----><div class="group" data-v-36a09a39><div class="item appearance" data-v-36a09a39><p class="label" data-v-36a09a39>Appearance</p><div class="appearance-action" data-v-36a09a39><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-36a09a39 data-v-bd8da54f data-v-1587fe0b><span class="check" data-v-1587fe0b><span class="icon" data-v-1587fe0b><!--[--><span class="vpi-sun sun" data-v-bd8da54f></span><span class="vpi-moon moon" data-v-bd8da54f></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-109f5bed data-v-01e8b504><span class="container" data-v-01e8b504><span class="top" data-v-01e8b504></span><span class="middle" data-v-01e8b504></span><span class="bottom" data-v-01e8b504></span></span></button></div></div></div></div><div class="divider" data-v-109f5bed><div class="divider-line" data-v-109f5bed></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-e6e9343e data-v-19ebc9ec><div class="container" data-v-19ebc9ec><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-19ebc9ec><span class="vpi-align-left menu-icon" data-v-19ebc9ec></span><span class="menu-text" data-v-19ebc9ec>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-19ebc9ec data-v-f4d555a5><button data-v-f4d555a5>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-e6e9343e data-v-3048e0f0><div class="curtain" data-v-3048e0f0></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3048e0f0><span class="visually-hidden" id="sidebar-aria-label" data-v-3048e0f0> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible has-active" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>简介</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/menu/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>菜单配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/layoutConfig/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>布局配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/iconfont/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>字体图标</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/server/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>服务端交互</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/vuex/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>vuex</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/build/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>打包预览</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>高级</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/power/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>权限管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/route/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>路由参数</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/i18n/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>国际化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/tagsView/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>标签页</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/directive/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>内置指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>其它</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/charts/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>数据可视化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/tool/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>工具类集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/partyPlug/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>第三方插件使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/builtPlug/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>内置插件的使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/otherIssues/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>其它问题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-e6e9343e data-v-1b0e1204><div class="VPDoc has-sidebar has-aside" data-v-1b0e1204 data-v-1bc29d7c><!--[--><!--]--><div class="container" data-v-1bc29d7c><div class="aside" data-v-1bc29d7c><div class="aside-curtain" data-v-1bc29d7c></div><div class="aside-container" data-v-1bc29d7c><div class="aside-content" data-v-1bc29d7c><div class="VPDocAside" data-v-1bc29d7c data-v-9a0c0521><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-9a0c0521 data-v-678806e9><div class="content" data-v-678806e9><div class="outline-marker" data-v-678806e9></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-678806e9>导航目录</div><ul class="VPDocOutlineItem root" data-v-678806e9 data-v-4569cf74><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-9a0c0521></div><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors"><div class="VPSponsors vp-sponsor aside"><!--[--><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid mini"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="http://www.ccflow.org/" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden">驰骋流程+表单+低代码</h4><img class="vp-sponsor-grid-image" src="/vue-next-admin-doc-preview/images/ccflowRightNextAdmin.png" alt="驰骋流程+表单+低代码"></article></a></div><!--]--></div></section><!--]--></div></div><!--]--><!--]--><!--]--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-1bc29d7c><div class="content-container" data-v-1bc29d7c><!--[--><!--]--><main class="main" data-v-1bc29d7c><div style="position:relative;" class="vp-doc _vue-next-admin-doc-preview_config_iconfont_" data-v-1bc29d7c><div><h1 id="字体图标" tabindex="-1">字体图标 <a class="header-anchor" href="#字体图标" aria-label="Permalink to &quot;字体图标&quot;">​</a></h1><h2 id="element-plus-svg-图标" tabindex="-1">element plus svg 图标 <a class="header-anchor" href="#element-plus-svg-图标" aria-label="Permalink to &quot;element plus svg 图标&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">Font Icon 向 SVG Icon 迁移</p><p>svg 文档地址：<a href="https://element-plus.gitee.io/zh-CN/component/icon.html" target="_blank" rel="noreferrer">element plus 官网 Icon 图标</a>。<code>&quot;element-plus&quot;: &quot;^1.2.0-beta.4&quot;</code>。框架版本 <a href="https://gitee.com/lyt-top/vue-next-admin/releases" target="_blank" rel="noreferrer">v1.2.0</a> 开始迁移。</p></div><h3 id="_1-框架中全局注册-svg" tabindex="-1">1. 框架中全局注册 svg <a class="header-anchor" href="#_1-框架中全局注册-svg" aria-label="Permalink to &quot;1. 框架中全局注册 svg&quot;">​</a></h3><p><a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/other.ts" target="_blank" rel="noreferrer">/@/utils/other.ts</a>，mian.ts 中引入 <code>import other from &#39;/@/utils/other&#39;;</code>。添加了 <code>ele</code> 前缀，防止图标冲突, <code>el</code> 前缀已被使用，可以使用 <code>el-xxx</code>。但是不建议已 <code>el</code> svg 前缀，因为会与 element plus 内置组件冲突</p><p><a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/pages/element" target="_blank" rel="noreferrer">查看演示图标</a>，注意看前缀为 <code>ele-</code>，使用为 <code>ele-xxx</code>。<code>xxx</code> 为 <a href="https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88" target="_blank" rel="noreferrer">element plus Icon 图标</a> 图标名称。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { App } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> svg </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@element-plus/icons&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 引入组件</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SvgIcon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineAsyncComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/@/components/svgIcon/index.vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * 导出全局注册 element plus svg 图标</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> vue 实例</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@description</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 使用：https://element-plus.gitee.io/zh-CN/component/icon.html</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> elSvg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> App</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> icons</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> svg </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> in</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icons) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ele-${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icons</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">name</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icons[i]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;SvgIcon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, SvgIcon);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// main.ts</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> other </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;/@/utils/other&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">other.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">elSvg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app);</span></span></code></pre></div><h3 id="_2-页面中使用-svg" tabindex="-1">2. 页面中使用 svg <a class="header-anchor" href="#_2-页面中使用-svg" aria-label="Permalink to &quot;2. 页面中使用 svg&quot;">​</a></h3><p>使用 element plus 的图标，可去 <a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/pages/element" target="_blank" rel="noreferrer">https://lyt-top.gitee.io/vue-next-admin-preview/#/pages/element</a> 复制粘贴</p><div class="tip custom-block"><p class="custom-block-title">svg 图标说明</p><p>如：ele-User，由两部分组成：</p><p>1、<code>ele</code>：<code>一、框架中全局注册 svg</code> 中添加的 svg 图标前缀。</p><p>2、<code>User</code>：为 svg 图标，请注意它的开头都是大写的，<a href="https://element-plus.gitee.io/zh-CN/component/icon.html" target="_blank" rel="noreferrer">element plus 官网 Icon 图标</a>。</p></div><ul><li>框架中： <code>ele-User</code> 为全局注册的 svg，注意这里添加了 <code>&lt;el-icon&gt;&lt;/el-icon&gt;</code> 包裹着。</li></ul><p>框架中直接使用全局注册的 svg，会报：<code>Property &quot;ele-User&quot; was accessed during render but is not defined on instance.</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-input</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  :placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;$t(&#39;message.account.accountPlaceholder1&#39;)&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ruleForm.userName&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  clearable</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  autocomplete</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;off&quot;</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  :prefix-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ele-User&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>所以使用了 <code>&lt;el-icon&gt;&lt;/el-icon&gt;</code> 包裹着</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-input</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  :placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;$t(&#39;message.account.accountPlaceholder1&#39;)&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ruleForm.userName&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  clearable</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  autocomplete</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;off&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> #prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-icon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;el-input__icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ele-User</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ul><li><a href="https://element-plus.gitee.io/zh-CN/component/icon.html" target="_blank" rel="noreferrer">element plus 官网 Icon 图标</a>：<code>Calendar</code> 为 svg 图标</li></ul><p>需要先引入</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 引入方法一</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script setup lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Calendar } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@element-plus/icons&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 引入方法二</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Calendar } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@element-plus/icons&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Calendar</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>然后页面中使用</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;input1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pick a date&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :suffix-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Calendar&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h3 id="_3-全局获取-svg" tabindex="-1">3. 全局获取 svg <a class="header-anchor" href="#_3-全局获取-svg" aria-label="Permalink to &quot;3. 全局获取 svg&quot;">​</a></h3><p><a href="/vue-next-admin-doc-preview/config/builtPlug/#图标选择器">内置图标选择器</a> 使用，<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/getStyleSheets.ts" target="_blank" rel="noreferrer">/@/utils/getStyleSheets.ts</a>（原初始化获取 css 样式，获取 element plus 自带图标方法）在 <a href="https://gitee.com/lyt-top/vue-next-admin/releases" target="_blank" rel="noreferrer">tag v1.1.2</a> 中查看。</p><p>element plus svg 图标也可以在框架中的 <a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/pages/element" target="_blank" rel="noreferrer">页面/element 字体图标</a> 演示中查看</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { nextTick } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> svg </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@element-plus/icons&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 初始化获取 css 样式，获取 element plus 自带 svg 图标，</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 增加了 ele- 前缀，使用时：ele-Aim</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getElementPlusIconfont</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    nextTick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> icons</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> svg </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sheetsIconList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> in</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icons) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        sheetsIconList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ele-${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icons</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">name</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (sheetsIconList.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(sheetsIconList);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      else</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;未获取到值，请刷新重试&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><h2 id="iconfont-font-awesome-图标" tabindex="-1">iconfont &amp; font-awesome 图标 <a class="header-anchor" href="#iconfont-font-awesome-图标" aria-label="Permalink to &quot;iconfont &amp; font-awesome 图标&quot;">​</a></h2><h3 id="_1-设置在线链接" tabindex="-1">1. 设置在线链接 <a class="header-anchor" href="#_1-设置在线链接" aria-label="Permalink to &quot;1. 设置在线链接&quot;">​</a></h3><p>代码位置：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/setIconfont.ts" target="_blank" rel="noreferrer">/@/utils/setIconfont.ts</a></p><p>此处为使用在线链接教程，使用本地请查看：<a href="#自定义引入本地图标">自定义引入本地图标</a></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// `/@/utils/setIconfont.ts` cssCdnUrlList 方法中添加在线链接</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 字体图标 url</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cssCdnUrlList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Array</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  &quot;//at.alicdn.com/t/font_2298093_y6u00apwst.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  &quot;//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre></div><h3 id="_2-app-vue-中引入" tabindex="-1">2. App.vue 中引入 <a class="header-anchor" href="#_2-app-vue-中引入" aria-label="Permalink to &quot;2. App.vue 中引入&quot;">​</a></h3><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setIntroduction </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;/@/utils/setIconfont&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 设置初始化，防止刷新时恢复默认</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onBeforeMount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 设置批量第三方 icon 图标</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  setIntroduction.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssCdn</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_3-界面中使用" tabindex="-1">3. 界面中使用 <a class="header-anchor" href="#_3-界面中使用" aria-label="Permalink to &quot;3. 界面中使用&quot;">​</a></h3><div class="danger custom-block"><p class="custom-block-title">注意前缀</p><ul><li><p>iconfont：需要添加 <code>iconfont</code> 前缀，如：<code>iconfont xitongshezhi</code></p></li><li><p>font-awesome：需要添加 <code>fa</code> 前缀，如：<code>fa xitongshezhi</code></p></li></ul></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- 项目使用 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;iconfont xitongshezhi&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- &lt;i class=&quot;fa xitongshezhi&quot;&gt;&lt;/i&gt; --&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- 或者 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">SvgIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;iconfont xitongshezhi&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">SvgIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- &lt;SvgIcon name=&quot;fa xitongshezhi&quot;&gt;&lt;/SvgIcon&gt; --&gt;</span></span></code></pre></div><h3 id="_4-全局获取-iconfont-font-awesome-图标" tabindex="-1">4. 全局获取 iconfont &amp; font-awesome 图标 <a class="header-anchor" href="#_4-全局获取-iconfont-font-awesome-图标" aria-label="Permalink to &quot;4. 全局获取 iconfont &amp; font-awesome 图标&quot;">​</a></h3><p><a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/getStyleSheets.ts" target="_blank" rel="noreferrer">/@/utils/getStyleSheets.ts</a> 中的 <code>getAlicdnIconfont</code> 与 <code>getAwesomeIconfont</code> 方法。</p><p>对应的图标在线演示 <a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/pages/iocnfont" target="_blank" rel="noreferrer">https://lyt-top.gitee.io/vue-next-admin-preview/#/pages/iocnfont</a></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取阿里字体图标</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getAlicdnIconfont</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    nextTick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> styles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.styleSheets;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sheetsList </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sheetsIconList </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styles.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (styles[i].href </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styles[i].href.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;at.alicdn.com&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          sheetsList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(styles[i]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sheetsList.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sheetsList[i].cssRules.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; j</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">          if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            sheetsList[i].cssRules[j].selectorText </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            sheetsList[i].cssRules[j].selectorText.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.icon-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          ) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            sheetsIconList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">              `${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">sheetsList</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">cssRules</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">j</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">selectorText</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">                .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">substring</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">sheetsList</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">cssRules</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">j</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">selectorText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">                .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">replace</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\:\:</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">before</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">gi</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            );</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (sheetsIconList.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(sheetsIconList);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      else</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;未获取到值，请刷新重试&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 初始化获取 css 样式，这里使用 fontawesome 的图标</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getAwesomeIconfont</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    nextTick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> styles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.styleSheets;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sheetsList </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sheetsIconList </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styles.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          styles[i].href </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          styles[i].href.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;netdna.bootstrapcdn.com&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          sheetsList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(styles[i]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sheetsList.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sheetsList[i].cssRules.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; j</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">          if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            sheetsList[i].cssRules[j].selectorText </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            sheetsList[i].cssRules[j].selectorText.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.fa-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &amp;&amp;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            sheetsList[i].cssRules[j].selectorText.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;,&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          ) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">            if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">::before</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(sheetsList[i].cssRules[j].selectorText)) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              sheetsIconList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">                `${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">sheetsList</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">cssRules</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">j</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">selectorText</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">                  .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">substring</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">sheetsList</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">cssRules</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">j</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">].</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">selectorText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">                  .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">replace</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\:\:</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">before</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">gi</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              );</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (sheetsIconList.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(sheetsIconList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reverse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      else</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;未获取到值，请刷新重试&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><p><a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/getStyleSheets.ts" target="_blank" rel="noreferrer">/@/utils/getStyleSheets.ts</a> 中导出使用</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * 获取字体图标 `document.styleSheets`</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@method</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ali</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 获取阿里字体图标 `&lt;i class=&quot;iconfont 图标类名&quot;&gt;&lt;/i&gt;`</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@method</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ele</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 获取 element plus 自带图标 `&lt;i class=&quot;图标类名&quot;&gt;&lt;/i&gt;`</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@method</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ali</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 获取 fontawesome 的图标 `&lt;i class=&quot;fa 图标类名&quot;&gt;&lt;/i&gt;`</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> initIconfont</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // iconfont</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  ali</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getAlicdnIconfont</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // element plus</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  ele</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getElementPlusIconfont</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // fontawesome</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  awe</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getAwesomeIconfont</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 导出方法</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> initIconfont;</span></span></code></pre></div><h2 id="自定义封装-svg-图标" tabindex="-1">自定义封装 svg 图标 <a class="header-anchor" href="#自定义封装-svg-图标" aria-label="Permalink to &quot;自定义封装 svg 图标&quot;">​</a></h2><h3 id="_1-封装-svg-组件" tabindex="-1">1. 封装 svg 组件 <a class="header-anchor" href="#_1-封装-svg-组件" aria-label="Permalink to &quot;1. 封装 svg 组件&quot;">​</a></h3><p>代码路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/components/svgIcon" target="_blank" rel="noreferrer">/@/components/svgIcon</a></p><p><a href="https://element-plus.gitee.io/zh-CN/component/icon.html" target="_blank" rel="noreferrer">结合 el-icon 使用</a>，<code>el-icon</code> 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;isShowIconSvg&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;el-icon&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;setIconSvgStyle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">component</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :is</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;getIconName&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-else-if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;isShowIconImg&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;setIconImgOutStyle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;getIconName&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;setIconSvgInsStyle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-else</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;getIconName&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;setIconSvgStyle&quot;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;"> /</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;svgIcon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { computed } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 定义父组件传过来的值</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // svg 图标组件名字</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      type: String,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // svg 大小</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    size: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      type: Number,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 14</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // svg 颜色</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    color: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      type: String,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 在线链接、本地引入地址前缀</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // https://gitee.com/lyt-top/vue-next-admin/issues/I62OVL</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> linesString</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;https&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;http&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;/src&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;/assets&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;data:image&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.env.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_PUBLIC_PATH</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ];</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 获取 icon 图标名称</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> getIconName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> props?.name;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 用于判断 element plus 自带 svg 图标的显示、隐藏</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isShowIconSvg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> props?.name?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">startsWith</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ele-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 用于判断在线链接、本地引入等图标显示、隐藏</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isShowIconImg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> linesString.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">str</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> props.name?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">startsWith</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(str));</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 设置图标样式</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> setIconSvgStyle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `font-size: ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">props</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">size</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px;color: ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">props</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">color</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">};`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 设置图片样式</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> setIconImgOutStyle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `width: ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">props</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">size</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px;height: ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">props</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">size</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px;display: inline-block;overflow: hidden;`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 设置图片样式</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> setIconSvgInsStyle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> filterStyle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> compatibles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-webkit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-ms&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-o&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-moz&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    compatibles.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forEach</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">j</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      filterStyle.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">j</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}-filter: drop-shadow(${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">props</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">color</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">} 30px 0);`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    );</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `width: ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">props</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">size</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px;height: ${</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      props</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">size</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    }px;position: relative;left: -${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">props</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">size</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px;${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">filterStyle</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">join</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_2-局部注册-全局注册-svg-组件" tabindex="-1">2. 局部注册 &amp; 全局注册 svg 组件 <a class="header-anchor" href="#_2-局部注册-全局注册-svg-组件" aria-label="Permalink to &quot;2. 局部注册 &amp; 全局注册 svg 组件&quot;">​</a></h3><ul><li>局部注册</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- 页面上使用 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">SvgIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;item.meta.icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;xxx&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> SvgIcon </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;/@/components/svgIcon/index.vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ul><li>全局注册（框架中使用全局注册）</li></ul><p><a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/other.ts" target="_blank" rel="noreferrer">/@/utils/other.ts</a> 中的 <code>elSvg</code> 方法</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 全局注册</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> SvgIcon </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;/@/components/svgIcon/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;SvgIcon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, SvgIcon);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 页面上使用</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">SvgIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;item.meta.icon&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 或者</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">SvgIcon name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ele-Aim&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;14&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#333333&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">/&gt;</span></span></code></pre></div><h2 id="自定义引入本地图标" tabindex="-1">自定义引入本地图标 <a class="header-anchor" href="#自定义引入本地图标" aria-label="Permalink to &quot;自定义引入本地图标&quot;">​</a></h2><h3 id="_1-下载-iconfont-到本地" tabindex="-1">1. 下载 iconfont 到本地 <a class="header-anchor" href="#_1-下载-iconfont-到本地" aria-label="Permalink to &quot;1. 下载 iconfont 到本地&quot;">​</a></h3><p><code>/src/theme</code>： <a href="/vue-next-admin-doc-preview/config/layoutConfig/#_1-目录结构">查看 /src/theme 目录结构</a></p><p>建议 icon 或者 svg 图标放入到 <a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/theme" target="_blank" rel="noreferrer">/src/theme</a> 文件夹中，方便管理。<a href="https://www.iconfont.cn/" target="_blank" rel="noreferrer">iconfont 下载</a>，其它渠道类似操作</p><p>如果引入本地 iconfont，需要先删除 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/setIconfont.ts" target="_blank" rel="noreferrer">/@/utils/setIconfont.ts</a> <code>cssCdnUrlList</code> 方法中的在线链接，把刚下载的 <code>iconfont</code> 图标文件夹重新命名为 <code>iconfont</code> 粘贴到 <a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/theme" target="_blank" rel="noreferrer">/src/theme</a> 文件夹中</p><h3 id="_2-引入-iconfont-本地图标" tabindex="-1">2. 引入 iconfont 本地图标 <a class="header-anchor" href="#_2-引入-iconfont-本地图标" aria-label="Permalink to &quot;2. 引入 iconfont 本地图标&quot;">​</a></h3><ul><li>建议在 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/theme/index.scss" target="_blank" rel="noreferrer">/src/theme/index.scss</a> 中引入（不建议直接在 main.ts 中引入）</li></ul><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 在 `/src/theme/index.scss`</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./iconfont/iconfont.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><ul><li>图标查看，直接进入 <code>/src/theme/iconfont/demo_index.html</code> 进行对应的图标查看，然后 cv 到自己项目中使用</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- 项目使用 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;iconfont xitongshezhi&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- 或者 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">SvgIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;iconfont xitongshezhi&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">SvgIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_3-群文件有-vue-next-admin、vue-prev-admin-离线字体图标" tabindex="-1">3. 群文件有 vue-next-admin、vue-prev-admin 离线字体图标 <a class="header-anchor" href="#_3-群文件有-vue-next-admin、vue-prev-admin-离线字体图标" aria-label="Permalink to &quot;3. 群文件有 vue-next-admin、vue-prev-admin 离线字体图标&quot;">​</a></h3><p><a href="/vue-next-admin-doc-preview/">去加群</a>，搜不到群，或者加了没同意，一般是群满了（一般秒过）。</p><ul><li>1 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&amp;jump_from=webapi">665452019</a></li><li>2 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&amp;jump_from=webapi">766356862</a></li><li>3 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&amp;jump_from=webapi">795345435</a></li><li>4 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0gTFO04WwkeZZ6R4lju6gucbeXHK-wNd&amp;jump_from=webapi">736626228</a></li><li>5 群：<a>556254895</a></li></ul></div></div></main><footer class="VPDocFooter" data-v-1bc29d7c data-v-7922fe7a><!--[--><!--]--><div class="edit-info" data-v-7922fe7a><div class="edit-link" data-v-7922fe7a><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/docs/config/iconfont/index.md" target="_blank" rel="noreferrer" data-v-7922fe7a><!--[--><span class="vpi-square-pen edit-link-icon" data-v-7922fe7a></span> 欢迎到 Gitee 上编辑此页<!--]--></a></div><div class="last-updated" data-v-7922fe7a><p class="VPLastUpdated" data-v-7922fe7a data-v-f919ac01>上次更新: <time datetime="2023-03-27T07:54:21.000Z" data-v-f919ac01></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-7922fe7a><span class="visually-hidden" id="doc-footer-aria-label" data-v-7922fe7a>Pager</span><div class="pager" data-v-7922fe7a><a class="VPLink link pager-link prev" href="/vue-next-admin-doc-preview/config/layoutConfig/" data-v-7922fe7a><!--[--><span class="desc" data-v-7922fe7a>上一页</span><span class="title" data-v-7922fe7a>布局配置</span><!--]--></a></div><div class="pager" data-v-7922fe7a><a class="VPLink link pager-link next" href="/vue-next-admin-doc-preview/config/server/" data-v-7922fe7a><!--[--><span class="desc" data-v-7922fe7a>下一页</span><span class="title" data-v-7922fe7a>服务端交互</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-e6e9343e data-v-d3e003fa><div class="container" data-v-d3e003fa><p class="message" data-v-d3e003fa>根据 MIT 许可证发布</p><p class="copyright" data-v-d3e003fa>本文档内容版权为 vue-next-admin 作者所有，保留所有权利。</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"config_build_index.md\":\"D66wEP1j\",\"config_builtplug_index.md\":\"D2vmqGsI\",\"config_charts_index.md\":\"AKJZmCTu\",\"config_directive_index.md\":\"BknO8zbE\",\"config_i18n_index.md\":\"CEUZIFAO\",\"config_iconfont_index.md\":\"CwSwNiIL\",\"config_index.md\":\"BWWh4uPI\",\"config_layoutconfig_index.md\":\"y3w-TjAE\",\"config_menu_index.md\":\"3wChSrOV\",\"config_otherissues_index.md\":\"BOPxKpRj\",\"config_partyplug_index.md\":\"C8yqZf2d\",\"config_power_index.md\":\"Ck6Qtvrt\",\"config_route_index.md\":\"Bh5Jr5_u\",\"config_server_index.md\":\"BlrltGMx\",\"config_tagsview_index.md\":\"T-3O6iEI\",\"config_tool_index.md\":\"BD422M9a\",\"config_vuex_index.md\":\"BlaPjLAQ\",\"home_compatible_index.md\":\"3OXuA7v8\",\"home_doc_index.md\":\"C45XHwz0\",\"home_eslint_index.md\":\"DaE-VgkK\",\"home_fast_index.md\":\"Cvjlg4iK\",\"home_forpeople_index.md\":\"FmtZKjE-\",\"home_gitpush_index.md\":\"4PZJWbVF\",\"home_index.md\":\"5dmU-wlV\",\"home_install_index.md\":\"B0F5JJzW\",\"home_introduce_index.md\":\"CXcs-Z1z\",\"home_prettier_index.md\":\"Cv6odTsh\",\"home_thank_index.md\":\"B-DzVr5x\",\"home_vscode_index.md\":\"Bowdae-M\",\"index.md\":\"B79oanHt\",\"shop_index.md\":\"PQuQh6BV\",\"support_index.md\":\"C3lVrH0L\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"vue-next-admin\",\"description\":\"🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档\",\"base\":\"/vue-next-admin-doc-preview/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/images/logo-mini.svg\",\"search\":{\"provider\":\"local\"},\"outlineTitle\":\"导航目录\",\"outline\":\"deep\",\"lastUpdatedText\":\"上次更新\",\"editLink\":{\"pattern\":\"https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/docs/:path\",\"text\":\"欢迎到 Gitee 上编辑此页\"},\"author\":\"lyt_20201208\",\"footer\":{\"message\":\"根据 MIT 许可证发布\",\"copyright\":\"本文档内容版权为 vue-next-admin 作者所有，保留所有权利。\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"指南\",\"link\":\"/home/\",\"activeMatch\":\"/home/\"},{\"text\":\"配置\",\"link\":\"/config/\",\"activeMatch\":\"/config/\"},{\"text\":\"集成后端\",\"items\":[{\"text\":\"@zuohuaijun Admin.NET\",\"link\":\"https://gitee.com/zuohuaijun/Admin.NET\"},{\"text\":\"@熊猫 PandaGoAdmin\",\"link\":\"https://github.com/PandaGoAdmin/PandaX\"},{\"text\":\"@甜蜜蜜 GoPro平台\",\"link\":\"https://toscode.gitee.com/GionConnection/gopro_free\"},{\"text\":\"@甜蜜蜜 NiuPi 平台\",\"link\":\"https://gitee.com/GionConnection/niupi-free\"},{\"text\":\"@游子 GFast-V3\",\"link\":\"https://gitee.com/tiger1103/gfast/tree/os-v3/\"},{\"text\":\"@diygw.com gw-ui-php\",\"link\":\"https://gitee.com/diygw/diygw-ui-php/\"},{\"text\":\"@zsvg vboot-net\",\"link\":\"https://gitee.com/zsvg/vboot-net\"},{\"text\":\"@zsvg vboot-java\",\"link\":\"https://gitee.com/zsvg/vboot-java\"},{\"text\":\"@青红造了个白 buildadmin\",\"link\":\"https://gitee.com/wonderful-code/buildadmin\"},{\"text\":\"@Goodwell iotfast(一个开源的物联网平台)\",\"link\":\"https://github.com/xiaodingding/iotfast\"}]},{\"text\":\"演示 & 仓库\",\"items\":[{\"text\":\"⛱️ 线上演示\",\"items\":[{\"text\":\"vue3.x 版本预览（vue-next-admin）\",\"link\":\"http://vuenextadmin.ccfast.cc/\"},{\"text\":\"vue2.x 版本预览（vue-prev-admin）\",\"link\":\"https://lyt-top.gitee.io/vue-prev-admin-preview/#/login\"},{\"text\":\"vue3 + uni-app 商城（vue-next-admin-shop）\",\"link\":\"https://lyt-top.gitee.io/vue-next-admin-shop-preview\"}]},{\"text\":\"💒 代码仓库\",\"items\":[{\"text\":\"gitee（国内：实时更新）\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin\"},{\"text\":\"github（国外：定期更新）\",\"link\":\"https://github.com/lyt-Top/vue-next-admin\"}]}]},{\"text\":\"日志 & 文档\",\"items\":[{\"text\":\"更新日志\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md\"},{\"text\":\"文档仓库\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin-doc\"}]},{\"text\":\"赞助\",\"link\":\"/support/\",\"activeMatch\":\"/support/\"},{\"text\":\"商城\",\"link\":\"/shop/\",\"activeMatch\":\"/shop/\"}],\"sidebar\":{\"/home/\":[{\"text\":\"入门须知\",\"collapsed\":false,\"items\":[{\"text\":\"许可\",\"link\":\"/home/\"},{\"text\":\"兼容性\",\"link\":\"/home/compatible/\"},{\"text\":\"适用人群\",\"link\":\"/home/forPeople/\"},{\"text\":\"学习文档\",\"link\":\"/home/doc/\"},{\"text\":\"特别鸣谢\",\"link\":\"/home/thank/\"}]},{\"text\":\"开发指南\",\"collapsed\":false,\"items\":[{\"text\":\"介绍\",\"link\":\"/home/introduce/\"},{\"text\":\"安装\",\"link\":\"/home/install/\"},{\"text\":\"其它\",\"link\":\"/home/fast/\"}]},{\"text\":\"代码规范\",\"collapsed\":false,\"items\":[{\"text\":\"eslint\",\"link\":\"/home/eslint/\"},{\"text\":\"prettier\",\"link\":\"/home/prettier/\"},{\"text\":\"vsCode 配置\",\"link\":\"/home/vscode/\"},{\"text\":\"git 提交规范\",\"link\":\"/home/gitPush/\"}]}],\"/config/\":[{\"text\":\"基础\",\"collapsed\":false,\"items\":[{\"text\":\"简介\",\"link\":\"/config/\"},{\"text\":\"菜单配置\",\"link\":\"/config/menu/\"},{\"text\":\"布局配置\",\"link\":\"/config/layoutConfig/\"},{\"text\":\"字体图标\",\"link\":\"/config/iconfont/\"},{\"text\":\"服务端交互\",\"link\":\"/config/server/\"},{\"text\":\"vuex\",\"link\":\"/config/vuex/\"},{\"text\":\"打包预览\",\"link\":\"/config/build/\"}]},{\"text\":\"高级\",\"collapsed\":false,\"items\":[{\"text\":\"权限管理\",\"link\":\"/config/power/\"},{\"text\":\"路由参数\",\"link\":\"/config/route/\"},{\"text\":\"国际化\",\"link\":\"/config/i18n/\"},{\"text\":\"标签页\",\"link\":\"/config/tagsView/\"},{\"text\":\"内置指令\",\"link\":\"/config/directive/\"}]},{\"text\":\"其它\",\"collapsed\":false,\"items\":[{\"text\":\"数据可视化\",\"link\":\"/config/charts/\"},{\"text\":\"工具类集合\",\"link\":\"/config/tool/\"},{\"text\":\"第三方插件使用\",\"link\":\"/config/partyPlug/\"},{\"text\":\"内置插件的使用\",\"link\":\"/config/builtPlug/\"},{\"text\":\"其它问题\",\"link\":\"/config/otherIssues/\"}]}],\"/shop/\":[{\"text\":\"首页\",\"collapsed\":false},{\"text\":\"分类\",\"collapsed\":false},{\"text\":\"服务\",\"collapsed\":false},{\"text\":\"购物车\",\"collapsed\":false},{\"text\":\"我的\",\"collapsed\":false}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>